<template>
  <!-- 编辑 -->
  <div class="app-container">
    <!-- 输入表单 -->
    <el-form label-width="120px">
      <el-form-item label="故障类型">
        <el-select v-model="cpHitch.hitchType" disabled>
          <el-option :value="0" :label="'通讯故障'" />
          <el-option :value="1" :label="'网关故障'" />
          <el-option :value="2" :label="'配件故障'" />
          <el-option :value="3" :label="'主板故障'" />
          <el-option :value="4" :label="'过流'" />
          <el-option :value="5" :label="'过压'" />
          <el-option :value="6" :label="'电器短路'" />
          <el-option :value="7" :label="'线路老化'" />
          <el-option :value="8" :label="'类型无法确定'"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="充电站点">
        <el-select v-model="cpHitch.addressSite" disabled>
          <el-option
            value="广州天河体育西共享充电站"
            :label="'广州天河体育西共享充电站'"
          />
          <el-option
            value="广州天河石牌桥共享充电站"
            :label="'广州天河石牌桥共享充电站'"
          />
          <el-option
            value="广州天河华师共享充电站"
            :label="'广州天河华师共享充电站'"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="充电桩型号">
        <el-select v-model="cpHitch.chargingpileType" disabled>
          <el-option value="BNBXF_CDZ001" :label="'BNBXF_CDZ001'" />
        </el-select>
      </el-form-item>
      <el-form-item label="充电桩编号">
        <el-select v-model="cpHitch.number" disabled>
          <el-option value="20230329_01" :label="'20230329_01'" />
          <el-option value="20230329_02" :label="'20230329_02'" />
        </el-select>
      </el-form-item>
      <el-form-item label="发生时间">
        <el-date-picker
          disabled
          v-model="cpHitch.regTime"
          type="datetime"
          placeholder="选择日期时间"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="详细地点" style="width: 600px">
        <el-input v-model="cpHitch.address" disabled></el-input>
      </el-form-item>
      <el-form-item label="站点联络人" style="width: 250px">
        <el-input v-model="cpHitch.contacts" disabled></el-input>
      </el-form-item>
      <el-form-item label="联络电话" style="width: 250px">
        <el-input v-model="cpHitch.contactsPhone" disabled></el-input>
      </el-form-item>
      <el-form-item label="紧急程度">
        <el-select v-model="cpHitch.rank" disabled>
          <el-option :value="0" :label="'一般'" />
          <el-option :value="1" :label="'紧急'" />
          <el-option :value="2" :label="'加急'" />
          <el-option :value="3" :label="'超加急'" />
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="状态">
        <el-select v-model="cpHitch.status">
          <el-option :value="0" :label="'登记'" />
        </el-select>
      </el-form-item> -->
      <el-form-item label="故障内容" style="width: 600px">
        <el-input
          type="textarea"
          autosize
          v-model="cpHitch.content"
          disabled
        ></el-input>
      </el-form-item>
      <el-form label-width="120px">
        <el-form-item label="资料附件">
          <el-image
            style="width: 150px"
            :src="cpHitch.hiddenImg"
            :preview-src-list="[cpHitch.hiddenImg]"
          />
        </el-form-item>
        <!-- <el-form-item label="资料附件">
          <el-upload
            :on-success="onUploadSuccessIdCard1"
            :on-remove="onUploadRemove"
            :multiple="false"
            :action="uploadUrl"
            :data="{ module: 'idCard' }"
            :limit="1"
            list-type="picture-card"
          >
            <i class="el-icon-plus"></i>
          </el-upload> -->
        <!-- <el-image
                style="width: 150px"
                :src="cpHitch.hiddenImg"
                :preview-src-list="[cpHitch.hiddenImg]"
              /> -->
        <!-- </el-form-item> -->
      </el-form>

      <el-form-item label="创建人" style="width: 250px">
        <el-input v-model="cpHitch.createPerson" disabled></el-input>
      </el-form-item>
      <el-form-item label="创建时间" style="width: 250px">
        <el-input v-model="cpHitch.createpersonTime" disabled></el-input>
      </el-form-item>
      <el-form-item>
        <h4>处理情况</h4>
      </el-form-item>
      <el-form-item label="办理内容" style="width: 600px">
        <el-input
          type="textarea"
          autosize
          v-model="cpHitchDeal.explain"
        ></el-input>
      </el-form-item>
      <el-form-item label="现场图片">
        <el-upload
          :on-success="onUploadSuccess"
          :on-remove="onUploadRemove"
          :multiple="false"
          :action="uploadUrl"
          :data="{ module: 'chargingPile' }"
          list-type="picture-card"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="其他附件">
        <el-upload
          :on-success="onUploadSuccess2"
          :on-remove="onUploadRemove"
          :multiple="false"
          :action="uploadUrl"
          :data="{ module: 'chargingPile' }"
          list-type="picture-card"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <router-link
          :to="'/charging-pile/hitch_manager'"
          style="margin-right: 5px"
        >
          <el-button type="default" size="small">返回</el-button>
        </router-link>
        <el-button
          :disabled="saveBtnDisabled"
          type="primary"
          size="small"
          style="margin-left: 50px"
          @click="cpHitchManagerStatusFour()"
        >
          保存&提交
        </el-button>
        <el-button
          :disabled="saveBtnDisabled"
          type="primary"
          size="small"
          style="margin-left: 50px"
          @click="addCpHitchDeal()"
        >
          保存
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
//引入api模块
import listApi from '@/api/charging-pile/hitch_manage'
export default {
  data() {
    let BASE_API = process.env.BASE_API || 'http://localhost:8130'
    return {
      saveBtnDisabled: false, //是否禁用保存按钮，防止表单重复提交
      cpHitch: {
        id: null,
        hiddenImg: null,
      }, //积分等级对象
      cpHitchDeal: {
        hitchId: 0,
        explain: null,
        sceneImg: null,
        otherImg: null,
      },
      // uploadUrl: BASE_API + '/api/oss/file/upload', //文件上传地址
      uploadUrl: BASE_API + '/api/oss/file/upload',
    }
  },
  created() {
    this.fetchDataById()
  },

  methods: {
    fetchDataById() {
      listApi.findCpHitchManagerById(this.$route.params.id).then((res) => {
        console.log(res)
        //sessionStorage.setItem('_id', this.$route.params.id)
        this.cpHitch.id = this.$route.params.id
        this.cpHitch = res.data.cpHitch
        console.log(this.cpHitch)
        console.log(this.cpHitch.id)
      })
    },
    //办理
    addCpHitchDeal() {
      //禁用提交按钮
      this.saveBtnDisabled = false
      this.cpHitchDeal.hitchId = sessionStorage.getItem('_id')
      //this.cpHitch.id = sessionStorage.getItem('_id')
      // console.log(this.hitchId)
      console.log('111111')
      console.log(this.cpHitchDeal)
      listApi
        .addCpHitchDeal(this.cpHitchDeal, this.cpHitch.id)
        .then((response) => {
          this.$message.success(response.message)
          this.$router.push('/charging-pile/hitch_manager') //路由地址进行改变
        })
    },
    //办理并提交
    cpHitchManagerStatusFour() {
      //禁用提交按钮
      this.saveBtnDisabled = false
      this.cpHitchDeal.hitchId = sessionStorage.getItem('_id')
      //this.cpHitch.id = sessionStorage.getItem('_id')
      console.log(this.cpHitch.id)
      listApi
        .cpHitchManagerStatusFour(this.cpHitchDeal, this.cpHitch.id)
        .then((response) => {
          console.log(response)
          this.$message.success(response.message)
          this.$router.push('/charging-pile/hitch_manager') //路由地址进行改变
        })
    },
    // onUploadSuccessIdCard1(response, file) {
    //   this.onUploadSuccess(response, file, 'idCard')
    // },

    //添加图片到oss
    onUploadSuccess(response, file, type) {
      if (response.code === 0) {
        console.log('进来了')
        this.cpHitchDeal.sceneImg = response.data.url
      } else {
        //业务失败
        this.$message.error(response.message)
      }
    },
    //添加图片到oss
    onUploadSuccess2(response, file, type) {
      if (response.code === 0) {
        console.log('进来了')
        this.cpHitchDeal.otherImg = response.data.url
      } else {
        //业务失败
        this.$message.error(response.message)
      }
    },
    onUploadRemove(file, fileList) {
      console.log('fileList', fileList)
      console.log(file.response.data.url)
      listApi.onUploadRemove(file.response.data.url).then((res) => {
        console.log('远程删除文件成功', file)
      })
    },
  },
}
</script>
